<template>
  <div
    style="
      position: absolute;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background: black;
      padding: 0;
      top: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
    "
    :style="{
      background: `url(${require('../assets/背景@2x.png')})`,
    }"
  >
    <el-container style="height: 100%; padding: 70px 70px">
      <el-aside
        width="200px"
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: auto;
          scrollbar-width: none;
          -ms-overflow-style: none;
        "
      >
        <div
          style="
            width: 90%;
            height: 98%;
            display: flex;
            flex-direction: column;
            border: solid #0066a8 5px;
          "
        >
          <div
            style="
              width: 100%;
              height: 80px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-bottom: solid #0066a8 2px;
            "
          >
            <img
              src="../assets/logo.png"
              style="width: 50px; height: 50px"
              alt=""
            />
            <div style="font-size: 15px; margin-left: 5px; color: #fff">
              深工中控toolBox
            </div>
          </div>
          <div
            style="
              width: 100%;
              overflow: auto;
              scrollbar-width: none;
              -ms-overflow-style: none;
              display: flex;
              flex-direction: column;
              align-items: center;
            "
          >
            <div
              @click="toOtherPage('/pageManage')"
              @mouseenter="mouseenterSystem('页面管理')"
              @mouseleave="mouseleaveSystem"
              style="
                width: 80%;
                height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 10px;
                flex-shrink: 0;
                cursor: pointer;
              "
              :style="{
                background:
                  hoverItem == '页面管理' || selectedItem == 'pageManage'
                    ? 'linear-gradient( to bottom,#1666D9 10%,#1A4A9B 90%, #1666D9 100%)'
                    : null,
              }"
            >
              <div
                style="
                  color: white;
                  width: 100px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                页面管理
              </div>
            </div>
            <div
              @click="toOtherPage('/scheduledTask')"
              @mouseenter="mouseenterSystem('定时任务')"
              @mouseleave="mouseleaveSystem"
              style="
                width: 80%;
                height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 10px;
                flex-shrink: 0;
                cursor: pointer;
              "
              :style="{
                background:
                  hoverItem == '定时任务' || selectedItem == 'scheduledTask'
                    ? 'linear-gradient( to bottom,#1666D9 10%,#1A4A9B 90%, #1666D9 100%)'
                    : null,
              }"
            >
              <div
                style="
                  color: white;
                  width: 100px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                定时任务
              </div>
            </div>
            <div
              @click="toOtherPage('/userManageMent')"
              @mouseenter="mouseenterSystem('用户管理')"
              @mouseleave="mouseleaveSystem"
              style="
                width: 80%;
                height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 10px;
                flex-shrink: 0;
                cursor: pointer;
              "
              :style="{
                background:
                  hoverItem == '用户管理' || selectedItem == 'userManageMent'
                    ? 'linear-gradient( to bottom,#1666D9 10%,#1A4A9B 90%, #1666D9 100%)'
                    : null,
              }"
            >
              <div
                style="
                  color: white;
                  width: 100px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                用户管理
              </div>
            </div>
            <div
              @click="toOtherPage('/manageMent')"
              @mouseenter="mouseenterSystem('后台设置')"
              @mouseleave="mouseleaveSystem"
              style="
                width: 80%;
                height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 10px;
                flex-shrink: 0;
                cursor: pointer;
              "
              :style="{
                background:
                  hoverItem == '后台设置' || selectedItem == 'manageMent'
                    ? 'linear-gradient( to bottom,#1666D9 10%,#1A4A9B 90%, #1666D9 100%)'
                    : null,
              }"
            >
              <div
                style="
                  color: white;
                  width: 100px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                后台设置
              </div>
            </div>
          </div>
        </div>
      </el-aside>
      <el-container
        style="display: flex; flex-direction: column; justify-content: center"
      >
        <!-- <el-header style="display: flex; align-items: center">
          <div
            style="
              width: 100%;
              display: flex;
              justify-content: end;
              align-items: center;
              height: 100%;
            "
          >
            <img
              src="../assets/语言.png"
              style="width: 30px; height: 30px"
              alt=""
            />
            <el-dropdown @command="handleCommand" style="color: white">
              <span class="el-dropdown-link">
                {{ languageStr
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="0">简体中文</el-dropdown-item>
                <el-dropdown-item command="1">繁體中文</el-dropdown-item>
                <el-dropdown-item command="2">English</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header> -->

        <div
          style="
            height: 98%;
            width: 99%;
            border: solid #0066a8 5px;
            display: flex;
            flex-direction: column;
            overflow: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
          "
        >
          <div
            style="
              width: 100%;
              height: 80px;
              display: flex;
              align-items: center;
              border-bottom: solid 2px #0066a8;
              justify-content: space-between;
            "
          >
            <div style="display: flex; align-items: center; margin-left: 10px">
              <img
                src="../assets/首页@2x.png"
                style="width: 25px; height: 25px"
                alt=""
              />
              <div style="color: #fff; margin-left: 5px">主页</div>
            </div>
            <div style="display: flex; align-items: center"></div>
          </div>
          <div
            style="width: 100%; flex: 1; display: flex; flex-direction: column"
          >
            <div
              style="
                width: calc(100% - 60px);
                flex: 1;
                display: flex;
                flex-wrap: wrap;
                margin: 0 30px;
              "
            >
              <router-view :key="$route.fullPath"></router-view>
            </div>
          </div>
        </div>

        <!-- <el-main> -->

        <!-- </el-main> -->
      </el-container>
    </el-container>

    <!-- <el-button
      @click="createPage"
      style="
        position: absolute;
        left: 0%;
        right: 0%;
        margin: auto;
        width: 100px;
        bottom: 200px;
      "
      type="primary"
      >创建页面</el-button
    >
    <el-button
      @click="scheduledTaskPage"
      style="
        position: absolute;
        left: 0%;
        right: 0%;
        margin: auto;
        width: 100px;
        bottom: 300px;
      "
      type="primary"
      >定时任务</el-button
    >
    <el-button
      @click="goToBackGroundSetting"
      style="
        position: absolute;
        left: 0%;
        right: 0%;
        margin: auto;
        width: 100px;
        bottom: 100px;
      "
      type="primary"
      >后台设置</el-button
    > -->
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      languageStr: (state) => state.language,
      selectedItem: (state) => state.selectedItem,
    }),
  },
  data() {
    return {
      hoverItem: null,
      restHeight1: null,
      backgroundImage: require("../assets/bg2.png"),
    };
  },
  mounted() {},
  methods: {
    mouseleaveSystem() {
      this.hoverItem = null;
    },
    mouseenterSystem(name) {
      this.hoverItem = name;
    },
    toOtherPage(path) {
      this.$store.commit("changeSelectedItem", path);
      this.$router.push(path);
    },
    async handleCommand(command) {
      let curLanguage = null;
      if (command == "0") {
        curLanguage = "简体中文";
      }
      if (command == "1") {
        curLanguage = "繁體中文";
      }
      if (command == "2") {
        curLanguage = "English";
      }
      let res = await request({
        url: "/language/api/changeLanguage/" + curLanguage,
        method: "POST",
      });
      if (res.data.status == 200) {
        this.$store.commit("changeLanguage", curLanguage);
      }
      this.language = command;
    },
  },
};
</script>

<style>
</style>